<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>会员中心</title>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/iconfont/iconfont.css" />
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css" />
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/index.css" />
    <script src="__STATIC_URL__/static/mobile/js/weui.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        #cardimg{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 0;
            display: block;
        }
        .card-right{
            width: 20px;
            height: 20px;
            padding: 3px;
            border-radius:5px;
            background: #fff;
            margin-top: 1px;
        }
        #code{
            width: 100%;
            height: 100%;
            vertical-align: middle;
            display: block;
        }
        @media screen and (min-width: 321px) {
            .card{
                width: 94%;
                height: 180px;
            }
            .cardbottom{
                margin-top:50px;
            }
        }
        @media screen and (max-width: 320px) {
            .card{
                width: 92%;
                height: 150px;
            }
            .logo {
                width: 70px;
                height: 60px;
                position: absolute;
                right: 15px;
                bottom: 15px;
            }
            .cardbottom{
                position: absolute;
                bottom: 0px;
                left: 0;
            }
        }
        #pay_code{
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            z-index: 1;
            display: none;
        }
        #pay_code h4{
            height: 30px;
            font-size: 12px;
            border-bottom: 1px solid darkorange;
            background: yellow;
            text-align: center;
            line-height: 30px;
            font-weight: 400;
        }
        #pay_code div{
            margin-top: 100px;
            text-align: center;
        }
        #pay_code dl img{
            display: block;
            width: 150px;
            height: 150px;
            margin: 0 auto;
        }
        #pay_code p{
            margin-top: 30px;
            text-align: center;
        }
        .weui-grid__icon + .weui-grid__label{
            margin-top: 10px;
        }
    </style>
</head>

<body>
<div id="pay_code">
    <h4>点击屏幕关闭二维码</h4>
    <div>
        <dl>
            <dt>
                <img src="{$info.qrcode}"/>
            </dt>
            <dd>
                会员卡号：{$info.code}
            </dd>
        </dl>
        <p>请在结账时出示给服务员</p>
    </div>
</div>
<div class="container" id="container">
    <div class="cardwrap">
        <div class="cardtop pd15 bgfff">
            {empty name="card.pic_url"}
                <div class="card relative" style="background:{$card['color']} url(__STATIC_URL__/static/mobile/images/card_b.png) repeat left top;">
                {else/}
            <div class="card relative" style="background:url({$card['pic_url']}) repeat left top;background-repeat:no-repeat;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover;">

            {/empty}

                <div class="card-top clearfix pd15">
                    <div class="card-left pull-left">
                        <dl class="clearfix">
                            <dt class="pull-left">
                                <img src="{$card.logo_url}" alt="" id="cardimg" />
                            </dt>
                            <dd class="pull-left" style="font-size: 12px;">
                                <span class="mgl10" style="display: block;line-height: 1.4;">{$card.brand_name}</span>
                                <span class="mgl10" style="display: block;line-height: 1.4;">{$card.title}</span>
                            </dd>
                        </dl>
                    </div>
                    <div class="card-right pull-right">
                        <img src="{$info.qrcode}" id="code" alt=""/>
                    </div>
                </div>
                <div class="cardbottom pd15 clearfix" style="">
                    <div class="pull-left">{$info.code}</div>
                </div>
            </div>
        </div>
        <div class="fenlei clearfix bgfff" style="padding:0 15px 15px 15px;">

            <dl class="pull-left" id="yue">
                <dt>
                    <img src="__STATIC_URL__/static/mobile/images/ye.png" alt="" />
                    余额
                </dt>
                <dd>
                    {$info.balance}
                </dd>
            </dl>

            <dl class="pull-left" id="jifen">
                <dt>
                    <img src="__STATIC_URL__/static/mobile/images/jf.png" alt="" />
                    积分
                </dt>
                <dd>
                    {$info.bonus}
                </dd>
            </dl>

            <dl class="pull-left" id="discount">
                <dt>
                    <img src="__STATIC_URL__/static/mobile/images/zk.png" alt="" />
                    等级
                </dt>
                <dd>
                    {$info['card_id']|getlive=###,$info['bonus']}
                </dd>
            </dl>

        </div>
    </div>
    <div class="grid mgt15 bgfff">
        <div class="weui-grids">

            <a href="{:url('carduser/recharge',array('card_id'=>$info['card_id']))}" class="weui-grid">
                <div class="weui-grid__icon">
                    <i class="icon iconfont icon-chongzhi" style="color:#f77371;font-size: 22px;"></i>
                </div>
                <p class="weui-grid__label">在线充值</p>
            </a>

            <a href="{:url('carduser/mecard',array('card_id'=>$info['card_id']))}" class="weui-grid">
                <div class="weui-grid__icon">
                    <i class="icon iconfont icon-K" style="color:#1484d8;"></i>
                </div>
                <p class="weui-grid__label">我的卡券</p>
            </a>

            <a href="{:url('cardshop/goods',array('card_id'=>$info['card_id']))}" class="weui-grid">
                <div class="weui-grid__icon">
                    <i class="icon iconfont icon-jifenshangcheng" style="color:#30ab7d;font-size: 22px;"></i>
                </div>
                <p class="weui-grid__label">积分商城</p>
            </a>

            <a href="{:url('carduser/storelist',array('card_id'=>$info['card_id']))}" class="weui-grid">
                <div class="weui-grid__icon">
                    <i class="icon iconfont icon-mendian-" style="color:#3ea47d;"></i>
                </div>
                <p class="weui-grid__label">适用门店</p>
            </a>

            <a href="{:url('carduser/cardinfo',array('card_id'=>$info['card_id']))}" class="weui-grid">
                <div class="weui-grid__icon">
                    <i class="icon iconfont icon-huiyuanqia" style="color:#f8b30d;font-size: 26px;"></i>
                </div>
                <p class="weui-grid__label">会员卡详情</p>
            </a>

            <a href="{:url('carduser/userinfo',array('card_id'=>$info['card_id']))}" class="weui-grid">
                <div class="weui-grid__icon">
                    <i class="icon iconfont icon-wodeziliao1" style="color:#35a7ff;"></i>
                </div>
                <p class="weui-grid__label">修改资料</p>
            </a>

        </div>
    </div>
</div>
</body>
<script src="__STATIC_URL__/static/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $("#yue").click(function(){
        window.location.href="{:url('carduser/balance', array('card_id'=>$info['card_id']))}";
    });
    $("#jifen").click(function(){
        window.location.href="{:url('carduser/bonus', array('card_id'=>$info['card_id']))}";
    });
    $("#discount").click(function(){
        window.location.href="{:url('carduser/level', array('card_id'=>$info['card_id']))}";
    });
    $("#code").click(function(){
        $("#pay_code").fadeIn();
    })
    $("#pay_code").click(function(){
        $(this).fadeOut();
    })
</script>
{neq name="jssdk.type" value="0"}
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    wx.config({
        debug: false,
        appId: "{$jssdk['appId']}",
        timestamp: "{$jssdk['timestamp']}",
        nonceStr: "{$jssdk['nonceStr']}",
        signature: "{$jssdk['signature']}",
        jsApiList: [
            'onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ',
            'onMenuShareWeibo','onMenuShareQZone'
        ]
    });
    wx.ready(function () {
        wx.checkJsApi({
            jsApiList: [
                'onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ',
                'onMenuShareWeibo','onMenuShareQZone'
            ],
        });
        var sharedata = {
            title:"{$card.title}",
            desc:"{$card.brand_name}-{$card.title}",
            link: "https://wxpay.weilinzhou.com/index.php/usercard/userindex/mid/{$card.mid}",
            imgUrl: "{$card.logo_url}",
        };
        wx.onMenuShareAppMessage(sharedata);
        wx.onMenuShareTimeline(sharedata);
        wx.onMenuShareQQ(sharedata);
        wx.onMenuShareWeibo(sharedata);
        wx.onMenuShareQZone(sharedata);
        wx.addCard({

        });
    })
</script>
{/neq}
</html>